<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili干杯</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css"></link>
    <link rel="stylesheet" href="./css/index.css"></link>
</head>
<body>
    <!-- 头部 -->
    <div class="navbar">
        <img src="https://s1.hdslb.com/bfs/static/jinkela/long/mstation/logo-bilibili-pink.png@132w_60h_1c.webp" alt="">
        <div class="right">
            <span href="#" class="iconfont icon-MBEfenggechangyongtubiao-sousuo"></span>
            <img src="https://img2.baidu.com/it/u=3772360156,3451961853&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731171600&t=09a8b3192192519a3993a76c32f277f6" alt="">
            <a href="">下载APP</a>
        </div>
    </div>
    <div class="tabs">
            <span>
                <a href="#">首页</a>
                <a href="#">动画</a>
                <a href="#">番剧</a>
                <a href="#">国创</a>
                <a href="#">音乐</a>
                <a href="#">舞蹈</a>
                <span class="iconfont icon-down-circle-fill"></span>
            </span>
    </div>
    <div class="main">
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
        <div class="item">
            <div class="pic">
            <img src="https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731258000&t=ac2015669e60b306b03e6f23900a4d24" alt="">
            <div class="info">
                <div class="left">
                    <span class="iconfont icon-tuya-"></span>
                    <a href="#"> 54.7万</a>
                </div>
                <div class="right">
                    <span class="iconfont icon-wuxuliebiao"></span>
                    <a href="#"> 1.4万</a>
                </div>
            </div>
            </div>
            <div class="box">
               <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p> 
            </div>
            
        </div>
    </div>
    

    <!-- 安装，下载 -->
   <div class="download">
        <img src="https://s1.hdslb.com/bfs/static/jinkela/long/mstation/logo-bilibili-pink.png@132w_60h_1c.webp" alt="">
        <span>打开App，看你感兴趣的视频</span>
   </div>
</body>
</html>